<template>
  <el-card>
    <el-card class="search-condition-card">
      <el-form v-model="searchForm" ref="searchFormRef" label-width="5vw">
        <!-- 这里可以根据实际需求添加各种搜索条件输入框，以下只是示例 -->
        <el-form-item label="操作人姓名">
          <el-input
            v-model.trim="searchForm.operateName"
            placeholder="请输入姓名"
          ></el-input>
        </el-form-item>
        <el-form-item label="操作方法名">
          <el-input
            v-model.trim="searchForm.methodName"
            placeholder="请输入方法名"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="用户名">
              <span>{{ props.row.operateName }}</span>
            </el-form-item>
            <el-form-item label="操作类名">
              <span>{{ props.row.className }}</span>
            </el-form-item>
            <el-form-item label="方法名称">
              <span>{{ props.row.methodName }}</span>
            </el-form-item>
            <el-form-item label="方法参数">
              <span>{{ props.row.methodParams }}</span>
            </el-form-item>
            <el-form-item label="返回数据">
              <span>{{ props.row.returnValue }}</span>
            </el-form-item>
            <el-form-item label="响应时长">
              <span>{{ props.row.costTime }}ms</span>
            </el-form-item>
            <el-form-item label="操作时间">
              <span>{{ props.row.operateTime.replace("T", " ") }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column type="index" width="50" label="编号"> </el-table-column>
      <el-table-column label="用户名">
        <template slot-scope="scope">
          {{ scope.row.operateName }}
        </template>
      </el-table-column>
      <el-table-column label="操作类名">
        <template slot-scope="scope">
          {{
            scope.row.className.split(".")[
              scope.row.className.split(".").length - 1
            ]
          }}
        </template>
      </el-table-column>
      <el-table-column prop="methodName" label="方法名称"> </el-table-column>
      <el-table-column prop="returnValue" label="返回数据"> </el-table-column>
      <el-table-column prop="costTime" label="响应时长">
        <template slot-scope="scope"> {{ scope.row.costTime }}ms</template>
      </el-table-column>
      <el-table-column label="操作时间">
        <template slot-scope="scope">
          {{ scope.row.operateTime.replace("T", " ") }}</template
        >
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[5, 10, 15]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </el-card>
</template>

<script>
import { getoperationLog } from '@/api/operationLog'

export default {
  data () {
    return {
      tableData: [],
      page: 1,
      pageSize: 10,
      total: 1,
      currentPage4: 1,
      searchForm: {
        operateName: '',
        methodName: ''
      }
    }
  },
  methods: {
    getoperationLog () {
      getoperationLog(
        this.page,
        this.pageSize,
        this.searchForm.operateName,
        this.searchForm.methodName
      ).then((data) => {
        this.total = data.data.total
        this.tableData = data.data.rows
      })
    },
    handleSizeChange (val) {
      this.pageSize = val
      this.getoperationLog()
    },
    handleCurrentChange (val) {
      this.page = val
      this.getoperationLog()
    },
    handleSearch () {
      this.getoperationLog()
    }
  },
  created () {
    this.getoperationLog()
  }
}
</script>

<style scoped>
/deep/ .cell {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/deep/ .demo-table-expand {
  font-size: 0;
}
/deep/ .demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
/deep/ .demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}

.search-condition-card {
  margin-bottom: 1vw;
}

.search-condition-card .el-form {
  display: flex;
}

.search-condition-card .el-form-item {
  width: 18vw;
  margin: 0;
}

.el-table td{
  text-align: left !important;
}
</style>
